<template>
  <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
      <!-- 首行 -->
      <tr class="title">
        <td width="50"><input type="checkbox" name="" class="choose_all" v-model='checkAll'></td>
        <td width="100" class=""><span style="margin-left: -10px;">全选</span></td>
        <td width="400">商品信息</td>
        <td width="150">单价（元）</td>
        <td width="150">数量</td>
        <td width="150">金额（元）</td>
        <td width="80">操作</td>
      </tr>

      <!-- 商品具体信息 -->
      <tr class="row" v-for="item in list" :key="item.id">
        <td><input v-model="item.isSelected" type="checkbox" name="" class="choose"></td>
        <td class="tal"><a href="#" class="pic"><img :src="item.img" alt=""></a>
        </td>
        <td class="tal"><a href="#">{{ item.name }}</a></td>
        <td>
          <del class="tdl">{{ item.oldPrice }}</del>
          <br>
          <b class="unit">{{ item.price }}</b>
        </td>
        <td>
          <div class="amount">
            <a href="#" class="Increase" @click="item.count+=1">+</a>
            <input type="text" :value="item.count" class="unum">
            <a href="#" class="Reduce" @click="item.count>0?item.count-=1:0">-</a>
          </div>
        </td>
        <td><b class="u-price">{{item.price*item.count}}</b></td>
        <td><a href="#" class="btn-del" @click="del(item.id)">删除</a></td>
      </tr>
      <tr class="count">
        <td colspan="7">
          <div class="jiesuan clearfix">
            <div class="left fl">
              <p><input type="checkbox" name="" class="choose_all" v-model="checkAll"> 全选&nbsp;&nbsp;&nbsp;<a href="#" class="del_check" @click="delSelectd">删除选中商品</a></p>
            </div>
            <div class="right fr clearfix">
              <p>商品总计：￥{{total}}</p>
              <p>活动优惠：-￥{{youhui}}</p>
              <p>已选商品<span class="red t-number"> {{selectedNumber}} </span>件 总价(不含运费、税费)：<span class="red t-price">￥{{selectedTotal}}</span></p>
              <!-- <div><a href="#" class="btn pay">结算</a></div> -->
              <a href="#" class="btn pay fr">结算</a>
            </div>
          </div>
        </td>
      </tr>
    </table>
</template>
<script>
export default {
  name: 'MyHeader',
  props: {
    list:Array,
  },
  computed:{
    checkAll:{
      get(){
        return this.list.every(item=>item.isSelected)
      },
      set(value){
         this.list=this.list.map(item=>{
          item.isSelected=value
          return item
         })
      }
    },
     total(){
      return this.list.reduce((prev,next)=>{return prev+next.oldPrice*next.count},0)
    },
    selectedTotal(){
      return this.list.reduce((prev,next)=>{
        if(next.isSelected){
          return prev+next.price*next.count
        }else{
          return prev
        }
      },0)
    },
    selectedNumber(){
      let num=0
      this.list.forEach(item=>{
        if (item.isSelected) {
          num++
        }
      })
      return num
    },
    youhui(){
     return  this.list.reduce((prev,next)=>{
        if (next.isSelected) {
          return prev+(next.oldPrice-next.price)*next.count
        }else{
          return prev
        }

      },0)
    }

  },
  components: {},
  data() {
    return {};
  },
  methods:{
    del(id){
        this.$emit('del',id)
    },
    delSelectd(){
        this.$emit('delSelectd')
    }
  }
};
</script>
<style lang='less' scoped>
</style>